<template>
  <div class="mainBody">
    <h1 class="title">城邑薪火</h1>
    <div class="topBody">
      <div
        class="liuchaoPlace mouseOver"
        @mouseenter="showThisInfo('六朝')"
        @mouseleave="hideThisInfo()"
      >
        <div class="container">
          <div
            class="card"
            id="card"
            v-show="chaiShow == '六朝'"
            style="left: 200px"
          >
            <h3 style="text-align: center">六朝</h3>
            <div class="wordContainer">
              六朝时期，典型的地点类型包括寺观/祠庙、山脉、桥梁、水体和宫殿。寺庙在六朝时期扮演着重要的宗教和文化角色。
            </div>
            <div id="liuchaoChart"></div>
          </div>
        </div>
      </div>
      <div
        class="tangPlace mouseOver"
        @mouseenter="showThisInfo('唐朝')"
        @mouseleave="hideThisInfo()"
      >
        <div class="container">
          <div
            class="card"
            id="card"
            v-show="chaiShow == '唐朝'"
            style="left: 200px"
          >
            <h3 style="text-align: center">唐朝</h3>
            <div class="wordContainer">
              在唐代，山脉是一个显著的地点类型，反映了大唐帝国的广阔疆域和自然风貌。山脉在唐代扮演着重要的军事、资源和文化角色。
            </div>

            <div id="tangchaoChart"></div>
          </div>
        </div>
      </div>
      <div
        class="songPlace mouseOver"
        @mouseenter="showThisInfo('宋朝')"
        @mouseleave="hideThisInfo()"
      >
        <div class="container">
          <div
            class="card"
            id="card"
            v-show="chaiShow == '宋朝'"
            style="left: 200px"
          >
            <h3 style="text-align: center">宋朝</h3>
            <div class="wordContainer">
              在宋代，园林成为一个典型的地点类型，反映了宋代人们对自然环境和艺术审美的追求。园林在宋代代表了精致的景观设计和文化内涵。
            </div>

            <div id="songchaoChart"></div>
          </div>
        </div>
      </div>
      <div
        class="yuanPlace mouseOver"
        @mouseenter="showThisInfo('元朝')"
        @mouseleave="hideThisInfo()"
      >
        <div class="container">
          <div
            class="card"
            id="card"
            v-show="chaiShow == '元朝'"
            style="left: 200px"
          >
            <h3 style="text-align: center">元朝</h3>
            <div class="wordContainer">
              在元代，桥梁是一个显著的地点类型，代表了交通和交流的重要性。桥梁在元代扮演着连接各地的重要角色，促进了经济和文化的交流。
            </div>

            <div id="yuanchaoChart"></div>
          </div>
        </div>
      </div>
      <div
        class="mingPlace mouseOver"
        @mouseenter="showThisInfo('明朝')"
        @mouseleave="hideThisInfo()"
      >
        <div class="container">
          <div
            class="card"
            id="card"
            v-show="chaiShow == '明朝'"
            style="left: 200px"
          >
            <h3 style="text-align: center">明朝</h3>
            <div class="wordContainer">
              在明代，衙署是一个典型的地点类型，代表了政治和行政的中心。衙署是明代地方行政机构的所在地，负责治理和维护社会秩序。
            </div>

            <div id="mingchaoChart"></div>
          </div>
        </div>
      </div>
      <div
        class="qingPlace mouseOver"
        @mouseenter="showThisInfo('清朝')"
        @mouseleave="hideThisInfo()"
      >
        <div class="container">
          <div
            class="card2"
            id="card"
            v-show="chaiShow == '清朝'"
            style="right: 230px"
          >
            <h3 style="text-align: center">清朝</h3>
            <div class="wordContainer">
              在清朝，祠庙是一个显著的地点类型，反映了清朝统治者对祖先崇拜和宗教信仰的重视。祠庙在清朝扮演着宗教仪式、教育和文化传承的角色。
            </div>

            <div id="qingchaoChart"></div>
          </div>
        </div>
      </div>
      <div
        class="jindaiPlace mouseOver"
        @mouseenter="showThisInfo('近代')"
        @mouseleave="hideThisInfo()"
      >
        <div class="container">
          <div
            class="card2"
            id="card"
            v-show="chaiShow == '近代'"
            style="right: 220px"
          >
            <h3 style="text-align: center">近代</h3>
            <div class="wordContainer">
              近代时期，寺观/学校成为一个典型的地点类型，反映了现代教育和文化发展的需求。寺观/学校在近代扮演着传承传统文化和提供教育的双重角色。
            </div>

            <div id="jindaiChart"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottomBody">
      <div class="line"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "placePaper",
  data() {
    return {
      chaiShow: "现代",
      test: 1,
      bridge:
        "path://M34.133333 375.466667h68.266667v286.72c-23.893333 13.653333-47.786667 27.306667-68.266667 44.373333V785.066667h44.373334c119.466667-102.4 273.066667-163.84 433.493333-163.84S826.026667 682.666667 945.493333 785.066667H989.866667v-81.92c-20.48-17.066667-44.373333-30.72-68.266667-44.373334V375.466667h85.333333V307.2H34.133333v68.266667z m716.8 0h102.4v252.586666c-34.133333-13.653333-68.266667-27.306667-102.4-37.546666V375.466667z m-204.8 0h136.533334v197.973333c-44.373333-10.24-92.16-17.066667-136.533334-17.066667V375.466667z m-204.8 0h136.533334v180.906666c-44.373333 3.413333-92.16 6.826667-136.533334 17.066667V375.466667z m-170.666666 0h102.4v215.04c-34.133333 10.24-68.266667 23.893333-102.4 37.546666V375.466667zM34.133333 204.8v68.266667h972.8V204.8H34.133333z",
      temple:
        "path://M877.714286 146.285714V36.571429a36.571429 36.571429 0 0 0-73.142857 0H365.714286a36.571429 36.571429 0 0 0-73.142857 0v109.714285S182.857143 256 0 182.857143a1193.691429 1193.691429 0 0 0 153.965714 129.462857 106.788571 106.788571 0 0 0 58.514286 16.822857h745.325714a106.788571 106.788571 0 0 0 58.514286-16.822857A1193.691429 1193.691429 0 0 0 1170.285714 182.857143c-182.857143 73.142857-292.571429-36.571429-292.571428-36.571429zM1024 877.714286a36.571429 36.571429 0 0 0-36.571429-36.571429V475.428571a73.142857 73.142857 0 0 0-73.142857-73.142857H256a73.142857 73.142857 0 0 0-73.142857 73.142857v365.714286a36.571429 36.571429 0 0 0-36.571429 36.571429H109.714286v146.285714h950.857143v-146.285714z m-475.428571 73.142857h-182.857143v-274.285714a91.428571 91.428571 0 0 1 182.857143 0z m256 0h-182.857143v-274.285714a91.428571 91.428571 0 0 1 182.857143 0z",
      mountain:
        "path://M266.538667 268.956444l-5.489778 4.750223 0.625778 7.224889c12.017778 141.383111-20.565333 269.880889-97.848889 385.991111l-7.381334 10.88V838.542222h722.360889l-0.056889-14.279111c-0.184889-48.426667-0.199111-98.816-0.056888-151.153778l0.085333-28.8-4.579556-4.238222c-34.801778-32.227556-55.139556-66.076444-84.408889-137.500444l-2.688-6.599111c-8.618667-21.304889-19.982222-55.495111-33.991111-102.4a56.888889 56.888889 0 0 0-51.911111-40.533334l-5.688889-0.170666c-24.106667-0.256-46.336 4.679111-66.759111 14.776888l-3.939555 2.033778c-28.344889 15.303111-44.942222 39.04-54.613334 69.930667l-0.881777 2.844444-1.436445-2.56c-25.941333-46.990222-45.639111-117.248-58.638222-210.588444l-2.460445-18.304-8.917333-2.588445c-80.483556-23.296-158.08-2.773333-231.324444 60.544z m214.542222-35.584l1.052444 7.381334c16.824889 116.024889 44.231111 198.001778 82.958223 246.314666l20.380444 25.415112 4.778667-32.227556c6.257778-42.268444 20.280889-71.879111 51.100444-87.111111 16.355556-8.092444 34.176-12.032 53.603556-11.832889l5.191111 0.142222c11.832889 0.540444 22.243556 8.675556 25.713778 20.266667l3.982222 13.269333c11.804444 38.798222 21.632 68.224 29.582222 88.376889l4.124444 10.183111 5.489778 13.198222c26.140444 61.852444 46.904889 96.170667 79.018667 127.701334l2.232889 2.147555-0.128 60.871111c-0.014222 21.973333 0 43.605333 0.028444 64.853334l0.071111 27.761778H184.888889v-123.548445l2.417778-3.584c77.738667-116.636444 112.440889-245.646222 104.007111-386.56l-0.725334-10.538667 3.598223-2.944c60.387556-48.839111 122.055111-65.166222 186.126222-49.735111l0.768 0.199111z",
      road: "path://M729.6 454.4C796.8 176 403.2 57.6 403.2 57.6H316.8s288 99.2 192 348.8C409.6 656 0 966.4 0 966.4h358.4s304-230.4 371.2-512zM534.4 57.6H448s387.2 118.4 323.2 419.2c-60.8 281.6-310.4 489.6-310.4 489.6H832s192-163.2 192-467.2C1024 198.4 534.4 57.6 534.4 57.6z",
      ancientPlace:
        "path://M64 320h64v672a32 32 0 0 0 32 32h704a32 32 0 0 0 32-32V320h64a32 32 0 0 0 32-32V32a32 32 0 0 0-32-32h-128a32 32 0 0 0-32 32v96h-64V32a32 32 0 0 0-32-32h-128a32 32 0 0 0-32 32v96h-64V32a32 32 0 0 0-32-32h-128a32 32 0 0 0-32 32v96H224V32a32 32 0 0 0-32-32H64a32 32 0 0 0-32 32v256a32 32 0 0 0 32 32z m32-256h64v96a32 32 0 0 0 32 32h128a32 32 0 0 0 32-32V64h64v96a32 32 0 0 0 32 32h128a32 32 0 0 0 32-32V64h64v96a32 32 0 0 0 32 32h128a32 32 0 0 0 32-32V64h64v192h-64a32 32 0 0 0-32 32v672H192V288a32 32 0 0 0-32-32H96V64z",
      siguan:
        "path://M832 362.666667v85.333333l82.133333 170.666667L981.333333 704H42.666667l67.2-85.333333L192 448v-85.333333H106.666667l48.768-53.333334L234.666667 192l21.333333-85.333333h85.333333l21.333334 42.666666h298.666666l21.333334-42.666666h85.333333l21.333333 85.333333 79.232 117.333333L917.333333 362.666667h-85.333333z m-42.666667 0H234.666667v85.333333h554.666666v-85.333333z m-39.573333-153.024L734.677333 149.333333h-25.642666l-21.333334 42.666667H336.298667l-21.333334-42.666667h-25.642666l-15.082667 60.309334L199.68 320H824.32l-74.538667-110.357333z m127.957333 431.744L805.184 490.666667H218.816l-72.533333 150.72-15.701334 19.946666h762.837334l-15.701334-19.946666z",
      school:
        "path://M509.866667 307.0976H289.352533a25.838933 25.838933 0 0 0-22.382933 12.928 25.864533 25.864533 0 0 0 0 25.856 25.838933 25.838933 0 0 0 22.382933 12.923733H509.866667a25.838933 25.838933 0 0 0 22.382933-12.928 25.864533 25.864533 0 0 0 0-25.856 25.838933 25.838933 0 0 0-22.382933-12.923733z m0 155.118933H289.352533a25.838933 25.838933 0 0 0-22.382933 12.928 25.864533 25.864533 0 0 0 0 25.856 25.838933 25.838933 0 0 0 22.382933 12.923734H509.866667a25.834667 25.834667 0 0 0 23.057066-12.680534 25.864533 25.864533 0 0 0 0-26.325333 25.834667 25.834667 0 0 0-23.057066-12.672v-0.029867z m358.421333-51.703466c-0.955733-29.482667-25.595733-52.6208-55.0656-51.707734h-165.6064V203.6864c-0.951467-29.482667-25.595733-52.6208-55.061333-51.707733H206.741333a53.367467 53.367467 0 0 0-38.340266 14.382933 53.422933 53.422933 0 0 0-16.878934 37.3248v672.1792h-27.5456a25.838933 25.838933 0 0 0-22.378666 12.928 25.864533 25.864533 0 0 0 0 25.856 25.838933 25.838933 0 0 0 22.378666 12.923733h771.780267a25.838933 25.838933 0 0 0 22.378667-12.928 25.864533 25.864533 0 0 0 0-25.856 25.838933 25.838933 0 0 0-22.378667-12.923733h-27.52l0.0512-465.352533zM592.631467 875.861333H206.741333V225.9968a23.261867 23.261867 0 0 1 23.825067-22.3616h338.1632a23.261867 23.261867 0 0 1 23.825067 22.3616v650.001067l0.0768-0.128z m220.437333 0h-165.376V433.079467a23.261867 23.261867 0 0 1 23.825067-22.357334h117.700266a23.261867 23.261867 0 0 1 23.825067 22.357334v443.0464l0.0256-0.256z m-303.202133-258.474666H289.352533a25.838933 25.838933 0 0 0-22.382933 12.923733 25.864533 25.864533 0 0 0 0 25.856 25.838933 25.838933 0 0 0 22.382933 12.923733H509.866667a25.838933 25.838933 0 0 0 22.382933-12.928 25.864533 25.864533 0 0 0 0-25.856 25.838933 25.838933 0 0 0-22.382933-12.923733z",
      mubei:
        "path://M779 912H112V765h133V379c0-147.46 119.54-267 267-267s267 119.54 267 267v386h133v147H779zM407 319h-49v324h49V319z m129 62h-49v324h49V381z m129-62h-49v324h49V319z",
      chenmen:
        "path://M140.3 534.78h116.53v22.73c0 2.55 2 4.62 4.46 4.62h103.56c2.47 0 4.46-2.07 4.46-4.62v-22.73h128.15v23.08c0 2.36 1.85 4.27 4.13 4.27h20.8c2.28 0 4.13-1.91 4.13-4.27v-23.08h128.15v22.73c0 2.55 2 4.62 4.47 4.62H762.7c2.47 0 4.46-2.07 4.46-4.62v-22.73H883.7L912 634.5H696.97v-25.03c0-1.82-1.43-3.29-3.19-3.29h-16.05c-1.76 0-3.19 1.47-3.19 3.29v25.03h-57.78v-31.61c0-2.21-1.73-4-3.87-4H593.4c-2.14 0-3.87 1.79-3.87 4v31.61h-58.46v-49.39c0-3.1-2.43-5.61-5.42-5.61h-27.31c-2.99 0-5.42 2.51-5.42 5.61v49.39h-58.46v-31.61c0-2.21-1.73-4-3.87-4H411.1c-2.14 0-3.87 1.79-3.87 4v31.61h-57.78v-25.03c0-1.82-1.43-3.29-3.19-3.29h-16.05c-1.76 0-3.19 1.47-3.19 3.29v25.03H112l28.3-99.72z m518.65-51.53c-1.07 0-1.94 0.9-1.94 2v26.47c0 1.11 0.87 2 1.94 2h11.1c1.07 0 1.94-0.9 1.94-2v-26.47c0-1.11-0.87-2-1.94-2h-11.1z m-39.27 0c-1.08 0-1.95 0.9-1.95 2.02v26.43c0 1.12 0.87 2.02 1.95 2.02h11.2c1.08 0 1.95-0.9 1.95-2.02v-26.43c0-1.12-0.87-2.02-1.95-2.02h-11.2z m-35.92 0c-1.43 0-2.6 1.2-2.6 2.69v25.1c0 1.48 1.16 2.69 2.6 2.69h14.9c1.44 0 2.6-1.2 2.6-2.69v-25.1c0-1.48-1.16-2.69-2.6-2.69h-14.9z m-37.13 0c-1.58 0-2.87 1.33-2.87 2.97v24.53c0 1.64 1.29 2.97 2.87 2.97h16.45c1.58 0 2.87-1.33 2.87-2.97v-24.53c0-1.64-1.29-2.97-2.87-2.97h-16.45z m-85.71 0c-1.59 0-2.87 1.33-2.87 2.97v24.53c0 1.64 1.28 2.97 2.87 2.97h16.45c1.59 0 2.87-1.33 2.87-2.97v-24.53c0-1.64-1.28-2.97-2.87-2.97h-16.45z m-35.58 0c-1.43 0-2.6 1.2-2.6 2.69v25.1c0 1.48 1.16 2.69 2.6 2.69h14.9c1.43 0 2.6-1.2 2.6-2.69v-25.1c0-1.48-1.16-2.69-2.6-2.69h-14.9z m-32.22 0c-1.08 0-1.95 0.9-1.95 2.02v26.43c0 1.12 0.87 2.02 1.95 2.02h11.2c1.08 0 1.95-0.9 1.95-2.02v-26.43c0-1.12-0.87-2.02-1.95-2.02h-11.2z m-39.16 0c-1.07 0-1.94 0.9-1.94 2v26.47c0 1.11 0.87 2 1.94 2h11.1c1.07 0 1.94-0.9 1.94-2v-26.47c0-1.11-0.87-2-1.94-2h-11.1z m146.25-37.52c-1.54 0-2.78 1.29-2.78 2.87v22.32c0 1.59 1.24 2.87 2.78 2.87h23.58c1.53 0 2.78-1.29 2.78-2.87V448.6c0-1.59-1.24-2.87-2.78-2.87h-23.58zM356.07 389.5h19.08v4.28c0 2.86 2.24 5.18 5 5.18h263.69c2.76 0 5.01-2.32 5.01-5.18v-4.28h19.08v9.38l27.27 37.34h21.68v14.54h-7.22c-2.25 0-4.07 1.88-4.07 4.21v16.84c0 2.32 1.82 4.21 4.07 4.21h22.46v19.51h-16.55c-2.99 0-5.41 2.5-5.41 5.59v11.09h-0.09v20.25h-29.23v-7.94c0-2.02-1.59-3.66-3.54-3.66H526.54v-33.72c0-2.15-1.68-3.89-3.76-3.89h-21.56c-2.08 0-3.76 1.74-3.76 3.89v33.72H346.7c-1.96 0-3.54 1.64-3.54 3.66v7.94h-29.23V512.2h-0.09v-11.09c0-3.09-2.42-5.59-5.41-5.59h-16.55v-19.51h22.46c2.25 0 4.07-1.89 4.07-4.21v-16.84c0-2.33-1.82-4.21-4.07-4.21h-7.22v-14.54h21.68l27.27-37.34v-9.37z",
      yashu:
        "path://M649.955556 142.293333a45.098667 45.098667 0 0 0-42.538667 45.027556l-0.014222 12.074667H403.697778v-12.785778A44.387556 44.387556 0 0 0 359.338667 142.222222l-2.517334 0.071111a44.387556 44.387556 0 0 0-41.870222 44.316445l-0.014222 34.958222-3.868445 3.697778c-13.283556 12.359111-25.002667 21.617778-35.100444 27.761778-5.12 3.128889-11.633778 6.542222-19.527111 10.24a85.333333 85.333333 0 0 1-67.029333 2.247111l-36.878223-14.321778a28.444444 28.444444 0 0 0-38.4 30.862222c5.916444 38.4 15.758222 67.541333 29.966223 87.552l2.318222 3.128889c15.971556 20.792889 42.865778 40.248889 80.682666 58.808889l3.384889 1.621333v229.944889h-50.289777a28.444444 28.444444 0 0 0-28.444445 28.444445v115.072l0.085333 2.133333a28.444444 28.444444 0 0 0 28.359112 26.311111h185.400888v26.595556a28.444444 28.444444 0 0 0 28.444445 28.444444h227.413333l2.133334-0.085333a28.444444 28.444444 0 0 0 26.311111-28.359111v-26.595556h187.207111a28.444444 28.444444 0 0 0 28.444444-28.444444v-115.057778l-0.085333-2.133334a28.444444 28.444444 0 0 0-28.359111-26.311111l-48.867556-0.014222v-229.973333l3.228445-1.536c44.430222-21.674667 73.685333-41.998222 88.149333-61.866667 13.312-18.304 22.456889-47.672889 28.16-88.504889a28.444444 28.444444 0 0 0-38.144-30.577778l-44.942222 16.810667a85.333333 85.333333 0 0 1-61.752889-0.753778c-11.477333-4.622222-20.195556-9.059556-26.026667-13.169777l-2.133333-1.564445c-9.358222-7.210667-20.650667-19.825778-33.564445-37.745778l-3.598222-5.063111v-21.845333A45.084444 45.084444 0 0 0 652.515556 142.222222l-2.56 0.071111zM652.515556 170.666667c9.187556 0 16.64 7.452444 16.64 16.64v30.734222l2.503111 3.640889c18.261333 26.595556 34.375111 44.928 48.881777 55.125333 7.864889 5.546667 18.417778 10.908444 31.758223 16.284445a113.777778 113.777778 0 0 0 82.346666 1.024l44.942223-16.810667c-5.12 36.608-13.013333 61.980444-22.997334 75.690667-12.088889 16.611556-41.756444 36.423111-88.590222 58.282666l-8.206222 3.825778v276.465778h77.297778v115.057778H621.44v55.04h-227.413333v-55.04H180.181333v-115.057778h78.748445V415.047111l-8.291556-3.811555c-41.898667-19.242667-69.688889-38.855111-83.356444-58.112-10.581333-14.890667-18.744889-38.072889-24.092445-69.432889l-0.967111-5.973334 36.878222 14.307556a113.777778 113.777778 0 0 0 89.372445-3.000889 234.368 234.368 0 0 0 22.272-11.704889c13.027556-7.921778 27.605333-19.655111 43.889778-35.214222l8.746666-8.519111v-46.976a15.943111 15.943111 0 1 1 31.886223 0v41.244444h260.593777v-40.533333c0-9.201778 7.452444-16.654222 16.64-16.654222z",
      // placeshow: false,
    };
  },
  mounted() {
    this.drawChart2(
      "liuchaoChart",
      "祠庙",
      "山脉",
      "桥梁",
      29,
      26,
      20,
      this.temple,
      this.mountain,
      this.bridge
    );
    this.drawChart2(
      "tangchaoChart",
      "山脉",
      "祠庙",
      "桥梁",
      6,
      5,
      4,
      this.mountain,
      this.temple,
      this.bridge
    );
    this.drawChart2(
      "songchaoChart",
      "山脉",
      "道路",
      "桥梁",
      31,
      26,
      19,
      this.mountain,
      this.road,
      this.bridge
    );
    this.drawChart2(
      "yuanchaoChart",
      "桥梁",
      "古迹",
      "山脉",
      11,
      9,
      8,
      this.bridge,
      this.ancientPlace,
      this.mountain
    );
    this.drawChart2(
      "mingchaoChart",
      "衙署",
      "桥梁",
      "陵墓",
      20,
      15,
      14,
      this.yashu,
      this.bridge,
      this.mubei
    );
    this.drawChart2(
      "qingchaoChart",
      "祠庙",
      "城门",
      "道路",
      59,
      57,
      303,
      this.temple,
      this.chenmen,
      this.road
    );
    this.drawChart2(
      "jindaiChart",
      "道路",
      "寺观",
      "学校",
      113,
      10,
      9,
      this.road,
      this.siguan,
      this.school
    );
  },
  methods: {
    showThisInfo(name) {
      this.chaiShow = name;
    },
    hideThisInfo() {
      this.chaiShow = "现代";
    },
    drawChart(id, name1, name2, name3, value1, value2, value3) {
      var chartDom = document.getElementById(id);
      var myChart = echarts.init(chartDom);
      var option;

      const labelSetting = {
        show: true,
        position: "right",
        offset: [10, 0],
        fontSize: 16,
      };
      function makeOption(type, symbol) {
        return {
          textStyle: {
            color: "#2B4155",
          },
          color: ["#8191a0", "#74b0a7", "#C5B79C"],
          legend: {
            data: ["2015", "2016", "2017"],
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          grid: {
            containLabel: true,
            left: 20,
          },
          yAxis: {
            data: ["主要地点"],
            inverse: true,
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: {
              // margin: 40,
              fontSize: 14,
            },
            axisPointer: {
              label: {
                show: true,
                margin: 30,
              },
            },
          },
          xAxis: {
            splitLine: { show: false },
            axisLabel: { show: false },
            axisTick: { show: false },
            axisLine: { show: false },
          },
          animationDurationUpdate: 500,
          series: [
            {
              name: name1,
              id: "bar1",
              type: type,
              label: labelSetting,
              symbolRepeat: true,
              // symbolSize: ['80%', '60%'],
              barCategoryGap: "40%",
              universalTransition: {
                enabled: true,
                delay: function (idx, total) {
                  return (idx / total) * 1000;
                },
              },
              data: [
                {
                  value: value1,
                  symbol: symbol,
                },
              ],
            },
            {
              name: name2,
              id: "bar2",
              type: type,
              barGap: "10%",
              label: labelSetting,
              symbolRepeat: true,
              // symbolSize: ['80%', '60%'],
              universalTransition: {
                enabled: true,
                delay: function (idx, total) {
                  return (idx / total) * 1000;
                },
              },
              data: [
                {
                  value: value2,
                  symbol: symbol,
                },
              ],
            },
            {
              name: name3,
              id: "bar3",
              type: type,
              barGap: "10%",
              label: labelSetting,
              symbolRepeat: true,
              // symbolSize: ['80%', '60%'],
              universalTransition: {
                enabled: true,
                delay: function (idx, total) {
                  return (idx / total) * 1000;
                },
              },
              data: [
                {
                  value: value3,
                  symbol: symbol,
                },
              ],
            },
          ],
        };
      }
      const options = [
        // makeOption('pictorialBar'),
        makeOption("bar"),
        makeOption("pictorialBar", "diamond"),
      ];
      var optionIndex = 0;
      option = options[optionIndex];
      setInterval(function () {
        optionIndex = (optionIndex + 1) % options.length;
        myChart.setOption(options[optionIndex]);
      }, 2500);

      option && myChart.setOption(option);
    },
    drawChart2(
      id,
      name1,
      name2,
      name3,
      value1,
      value2,
      value3,
      symbol1,
      symbol2,
      symbol3
    ) {
      var chartDom = document.getElementById(id);
      var myChart = echarts.init(chartDom);
      var option;

      const pathSymbols = {
        symbol1: symbol1,
        symbol2: symbol2,
        symbol3: symbol3,
      };
      const labelSetting = {
        show: true,
        position: "right",
        offset: [10, 0],
        fontSize: 16,
      };
      function makeOption(type, symbol) {
        return {
          textStyle: {
            color: "#966664",
          },
          color: ["#966664", "#74b0a7", "#C5B79C"],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          grid: {
            containLabel: true,
            left: 20,
          },
          yAxis: {
            data: [name1, name2, name3],
            inverse: true,
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: {
              margin: 30,
              fontSize: 14,
            },
            axisPointer: {
              label: {
                show: true,
                margin: 30,
              },
            },
          },
          xAxis: {
            splitLine: { show: false },
            axisLabel: { show: false },
            axisTick: { show: false },
            axisLine: { show: false },
          },
          animationDurationUpdate: 500,
          series: [
            {
              name: "2015",
              id: "bar1",
              type: type,
              label: labelSetting,
              symbolRepeat: true,
              symbolSize: ["80%", "60%"],
              barCategoryGap: "40%",
              universalTransition: {
                enabled: true,
                delay: function (idx, total) {
                  return (idx / total) * 1000;
                },
              },
              data: [
                {
                  value: value1,
                  symbol: pathSymbols.symbol1,
                },
                {
                  value: value2,
                  symbol: pathSymbols.symbol2,
                },
                {
                  value: value3,
                  symbol: pathSymbols.symbol3,
                },
              ],
            },
          ],
        };
      }
      const options = [
        makeOption("pictorialBar"),
        makeOption("bar"),
        makeOption("pictorialBar", "diamond"),
      ];
      var optionIndex = 0;
      option = options[optionIndex];
      setInterval(function () {
        optionIndex = (optionIndex + 1) % options.length;
        myChart.setOption(options[optionIndex]);
      }, 2500);

      option && myChart.setOption(option);
    },
  },
};
</script>

<style scoped>
.mainBody {
  font-family: "Lobster", "cursive";
  position: relative;
  background-color: #ece8e5;
  background-image: url("@/assets/bgc2.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 740px;
}
.title{
  position: absolute;
  left:650px;
  font-family: "华文行楷", "STXingkai", serif;
}
.topBody {
  /* background-color: blue;  */
  height: 450px;
  /* background-image: url("@/assets/river.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;  */
}
.bottomBody {
  /* background-color: yellow; */
  height: 350px;
}
.liuchaoPlace {
  position: absolute;
  background-image: url("@/assets/六朝地点.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  top: 100px;
  left: 150px;
  height: 120px;
  width: 160px;
  /* background-color: pink; */
}
.liuchaoPlace:hover {
  background-image: url("@/assets/六朝地点2.png");
  top: 80px;
  left: 120px;
  height: 180px;
  width: 220px;
  /* background-color: pink; */
}

.tangPlace {
  position: absolute;
  background-image: url("@/assets/唐朝地点.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  top: 380px;
  left: 80px;
  height: 200px;
  width: 220px;
  /* background-color: pink; */
}
.tangPlace:hover {
  background-image: url("@/assets/唐朝地点2.png");
  top: 360px;
  left: 50px;
  height: 250px;
  width: 270px;
}
.songPlace {
  position: absolute;
  background-image: url("@/assets/宋朝地点.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  top: 200px;
  left: 420px;
  height: 130px;
  width: 180px;
  /* background-color: pink; */
}
.songPlace:hover {
  background-image: url("@/assets/宋朝地点2.png");
  top: 180px;
  left: 390px;
  height: 190px;
  width: 240px;
  /* background-color: pink; */
}
.yuanPlace {
  position: absolute;
  background-image: url("@/assets/元朝地点.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  top: 250px;
  left: 650px;
  height: 140px;
  width: 200px;
  /* background-color: pink; */
}
.yuanPlace:hover {
  background-image: url("@/assets/元朝地点2.png");
  top: 220px;
  left: 620px;
  height: 200px;
  width: 260px;
  /* background-color: pink; */
}
.mingPlace {
  position: absolute;
  background-image: url("@/assets/明朝地点.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  top: 80px;
  left: 800px;
  height: 140px;
  width: 200px;
  /* background-color: pink; */
}
.mingPlace:hover {
  background-image: url("@/assets/明朝地点2.png");
  top: 60px;
  left: 780px;
  height: 190px;
  width: 250px;
  /* background-color: pink; */
}
.qingPlace {
  position: absolute;
  background-image: url("@/assets/清朝地点.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  top: 150px;
  left: 1050px;
  height: 140px;
  width: 200px;
  /* background-color: pink; */
}
.qingPlace:hover {
  background-image: url("@/assets/清朝地点2.png");
  top: 120px;
  left: 1020px;
  height: 200px;
  width: 270px;
  /* background-color: pink; */
}
.jindaiPlace {
  position: absolute;
  background-image: url("@/assets/近代地点.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  top: 280px;
  left: 1300px;
  height: 140px;
  width: 200px;
  /* background-color: pink; */
}
.jindaiPlace:hover {
  background-image: url("@/assets/近代地点2.png");
  top: 250px;
  left: 1270px;
  height: 200px;
  width: 270px;
  /* background-color: pink; */
}

.mouseOver:hover {
  cursor: pointer;
}

.card {
  position: absolute;
  z-index: 3;
  width: 370px;
  height: 350px;
  background-color: #ece8e5;
  border-radius: 10px;
  border: solid 2px rgba(0, 0, 0, 0.4);
  left: 110px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
.card2 {
  position: absolute;
  z-index: 3;
  width: 350px;
  height: 350px;
  background-color: #ece8e5;
  border-radius: 10px;
  border: solid 2px rgba(0, 0, 0, 0.4);
  right: 110px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
.places {
  text-align: left;
}
.placeContainer {
}
#liuchaoChart {
  position: absolute;
  top: 100px;
  width: 350px;
  height: 300px;
  /* border: 1px solid rgba(0, 0, 0, 0.5); */
}
#tangchaoChart {
  position: absolute;
  top: 100px;
  width: 350px;
  height: 300px;
  /* border: 1px solid rgba(0, 0, 0, 0.5); */
}
#songchaoChart {
  position: absolute;
  top: 100px;
  width: 350px;
  height: 300px;
  /* border: 1px solid rgba(0, 0, 0, 0.5); */
}
#yuanchaoChart {
  position: absolute;
  top: 100px;
  width: 350px;
  height: 300px;
  /* border: 1px solid rgba(0, 0, 0, 0.5); */
}
#mingchaoChart {
  position: absolute;
  top: 100px;
  width: 350px;
  height: 300px;
  /* border: 1px solid rgba(0, 0, 0, 0.5); */
}
#qingchaoChart {
  position: absolute;
  top: 100px;
  width: 350px;
  height: 300px;
  /* border: 1px solid rgba(0, 0, 0, 0.5); */
}
#jindaiChart {
  position: absolute;
  top: 100px;
  width: 350px;
  height: 300px;
  /* border: 1px solid rgba(0, 0, 0, 0.5); */
}

.itemContainer {
  position: absolute;
  top: 190px;
  /* background-color: black; */
  height: 20px;
}
.item {
  float: left;
  margin-left: 30px;
  margin-right: 10px;
  line-height: 20px;
}
.itemColorBlock1 {
  float: left;
  height: 20px;
  width: 20px;
  margin-right: 10px;
  background-color: #74b0a7;
  /* "#C9AB87", "#2B4155", "#61636A" */
}
.itemColorBlock2 {
  float: left;
  height: 20px;
  width: 20px;
  margin-right: 10px;
  background-color: #8191a0;
  /* "#C9AB87", "#2B4155", "#61636A" */
}
.itemColorBlock3 {
  float: left;
  height: 20px;
  width: 20px;
  margin-right: 10px;
  background-color: #c5b79c;
  /* "#C9AB87", "#2B4155", "#61636A" */
}
.wordContainer {
  margin: 0 auto;
  margin-top: -10px;
  width: 300px;
}
h3 {
  color: #966664;
  font-weight: 300;
  font-family: "华文行楷", "STXingkai", serif;
  font-size: 24px;
}
</style>